<template>
  <div>
    <div class="pay_box">
      <el-form>
        <el-form-item label="接诊日期">
          <el-date-picker v-model="form.orderTimeStart" class="pay_date" type="date" value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>----
          <el-date-picker style="marigin-left:4%;" v-model="form.orderTimeEnd" class="pay_date" type="date" value-format="yyyy-MM-dd" placeholder="结束时间"></el-date-picker>
          <el-button type="primary" circle icon="el-icon-search" @click="getChartTable(-1)"></el-button>
        </el-form-item>
      </el-form>
      <div ref="labelchart" class="chart_box">

      </div>
    </div>
    <div class="pay_box">
      <table class="table-box">
        <thead>
          <tr>
            <th style="text-align:center;font-size:18px;" colspan="11">收费分类统计报表</th>
          </tr>
          <tr>
            <th>接诊日期</th>
            <th>现金</th>
            <th>银行卡</th>
            <!-- <th>支付宝</th>
            <th>积分抵扣</th> -->
            <th>微信</th>
            <th>卡券</th>
            <th>减免</th>
            <!-- <th>医保支付</th>
            <th>商保支付</th> -->
            <th>挂账</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tabList" :key="index">
            <td>{{item.dateDay}}</td>
            <td>{{item.xianJin}}</td>
            <td>{{item.yinHangKa}}</td>
            <!-- <td>{{item.zhiFubao}}</td>
            <td>{{item.jiFen}}</td> -->
            <td>{{item.weiXin}}</td>
            <td>{{item.kaQuan}}</td>
            <td>{{item.jianMian}}</td>
            <!-- <td>{{item.yiBao}}</td>
            <td>{{item.shangBao}}</td> -->
            <td>{{item.guaZhang}}</td>
          </tr>
          <tr class="foot_tatol">
            <td>合计</td>
            <td>{{orderDayCount.xianJin | NumberToFixed}}</td>
            <td>{{orderDayCount.yinHangKa  | NumberToFixed}}</td>
            <!-- <td>{{orderDayCount.zhiFubao}}</td>
            <td>{{orderDayCount.jiFen}}</td> -->
            <td>{{orderDayCount.weiXin  | NumberToFixed}}</td>
            <td>{{orderDayCount.kaQuan  | NumberToFixed}}</td>
            <td>{{orderDayCount.jianMian  | NumberToFixed}}</td>
            <!-- <td>{{orderDayCount.yiBao}}</td>
            <td>{{orderDayCount.shangBao}}</td> -->
            <td>{{orderDayCount.guaZhang  | NumberToFixed}}</td>
          </tr>
        </tbody>
      </table>
      <br />
      <!-- <pager v-model="pager" @change-pagenum="getChartTable"></pager> -->
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        orderTimeStart: "",
        orderTimeEnd: ""
      },
      orderDayCount: {
        xianJin: 0,
        yinHangKa: 0,
        // zhiFubao: 0,
        // jiFen: 0,
        weiXin: 0,
        kaQuan: 0,
        jianMian: 0,
        // yiBao: 0,
        // shangBao: 0,
        guaZhang: 0
      },
      showDay: false,
      pager: { pageSize: 10, pageNum: 1, total: 0 },
      tabList: [],
      chart: null,
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          x: "center",
          top: 40,
          data: ["UCC国际洗涤厂", "兰心洗涤厂", "洪雅洗涤厂"]
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "65%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "UCC国际洗涤厂" },
              { value: 310, name: "兰心洗涤厂" },
              { value: 234, name: "洪雅洗涤厂" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.form.orderTimeStart = this.getDate();
    this.form.orderTimeEnd = this.getNewDate();
    this.getChartTable();
  },
  methods: {
    getChartTable() {
      let th = this;
      th.showLoading();
      th.chart = echarts.init(th.$refs["labelchart"]);
      let j = Object.assign(th.form, th.pager);
      th.$api
        .getPaywayReport(j)
        .then(res => {
          if (res.executed) {
            th.tabList = res.dataBody.paywayLists;
            let list = res.dataBody.paywayLists;
            let chart_title = [
              // "挂账",
              // "积分",
              "减免",
              "卡券",
              // "商保",
              "微信",
              "现金",
              // "医保",
              "银行卡",
              "余额",
              // "支付宝"
            ];
            let chart_data = [
              {
                name: "挂账",
                value: res.dataBody.paywayCount.guaZhang
              },
              // {
              //   name: "积分",
              //   value: res.dataBody.paywayCount.jiFen
              // },
              {
                name: "减免",
                value: res.dataBody.paywayCount.jianMian
              },
              {
                name: "卡券",
                value: res.dataBody.paywayCount.kaQuan
              },
              // {
              //   name: "商保",
              //   value: res.dataBody.paywayCount.shangBao
              // },
              {
                name: "微信",
                value: res.dataBody.paywayCount.weiXin
              },
              {
                name: "现金",
                value: res.dataBody.paywayCount.xianJin
              },
              // {
              //   name: "医保",
              //   value: res.dataBody.paywayCount.yiBao
              // },
              {
                name: "银行卡",
                value: res.dataBody.paywayCount.yinHangKa
              },
              {
                name: "余额",
                value: res.dataBody.paywayCount.yuE
              },
              // {
              //   name: "支付宝",
              //   value: res.dataBody.paywayCount.zhiFubao
              // }
            ];
            th.option.legend.data = chart_title;
            th.option.series[0].data = chart_data;

            let order = {
              xianJin: 0,
              yinHangKa: 0,
              zhiFubao: 0,
              jiFen: 0,
              weiXin: 0,
              kaQuan: 0,
              jianMian: 0,
              yiBao: 0,
              shangBao: 0,
              guaZhang: 0
            };
            for (let i = 0; i < list.length; i++) {
              order.xianJin += Number(list[i].xianJin);
              order.yinHangKa += Number(list[i].yinHangKa);
              order.jiFen += Number(list[i].jiFen);
              order.jianMian += Number(list[i].jianMian);
              order.weiXin += Number(list[i].weiXin);
              order.zhiFubao += Number(list[i].zhiFubao);
              order.yuE += Number(list[i].yuE);
              order.yiBao += Number(list[i].yiBao);
              order.shangBao += Number(list[i].shangBao);
              order.guaZhang += Number(list[i].guaZhang);
              order.kaQuan += Number(list[i].kaQuan);
            }
            th.orderDayCount = order;
            th.chart.setOption(th.option);
            th.showLoading(false);
          } else {
            th.$message.error(res.message);
            th.showLoading(false);
          }
        })
        .catch(error => {
          th.showLoading(false);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.pay_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  overflow-x: auto;
  .table-box {
    min-width: 600px;
    font-size: 12px;
    .foot_tatol td{
      color: $error-color; 
    }
  }
}
.pay_date {
  width: 10% !important;
  margin-right: 1%;
}
.chart_box {
  display: inline-block;
  width: 100%;
  height: 400px;
}
</style>